<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="orderList">
		<!-- 套餐 -->
		<view class="packBusiness marin25">
			<view class="foodpackbu-litm">
				<view class="foodpackbu-top">
					<image :src="form.image " mode="aspectFill" class="fd-img"></image>
					<view class="itempack-right">
						<view class="title-cont">
							<text>{{form.title}}</text>
							<view class="">
								<text>¥{{form.price}}</text>
								<!-- <text>¥128</text> -->
							</view>
						</view>
						<!-- <view class="ratebu-cont">
							<view class="ratebu-textA">
								<text v-if="form.ifZm == 0">周一至周五</text>
								<text v-if="form.ifZm == 1">周一至周天</text>
								<text v-if="form.ifJjr == 0">(节假日可用)</text>
								<text v-if="form.ifJjr == 1">(节假日不可用)</text>
							</view>
						</view> -->
						<view class="addres-cont">
							<view class="addres-textA">
								<text class="addres-text" v-if="form.tag1">{{form.tag1}}</text>
								<text class="addres-text" v-if="form.tag2">{{form.tag2}}</text>
							</view>
							<view class="addres-compute">
								<fui-input-number custom @change="changes" backgroundColor="#FFF" :size="30" :width="60" margin="0">
									<image :src="baseOssUrl + 'icon/jian.png' " mode=""></image>
									<template v-slot:plus>
										<image :src="baseOssUrl + 'icon/jia.png'" mode=""></image>
									</template>
								</fui-input-number>
							</view>
						</view>
						<view class="subtotalA">
							<text class="subtotal-text">小计</text>
							<text class="subtotal-price">¥{{form.price*num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 实付金额 -->
		<view class="payAmount marin25">
			<view class="amountbu-litm ">
				<text class='am-1'>实付金额</text>
				<text class='am-2'>¥{{form.price*num}}</text>
			</view>
			<view class="amountbu-litm ">
				<text class='am-1'>联系人</text>
				<input type="number" style="text-align: right;" maxlength="11" placeholder="取票人(联系人) 手机号" v-model="contactTEL">
			</view>
			<view class="amountbu-litm ">
				<text class='am-1'>游客姓名</text>
				<input type="text" style="text-align: right;"maxlength="8" placeholder="请输入游客姓名" v-model="ordername">
			</view>
			<!-- <view class="amountbu-litm ">
				<text class='am-1'>游玩人手机号</text>
				<input type="text" style="text-align: right;" placeholder="请输入游玩人手机号" v-model="ordertel">
			</view> -->
			<view class="amountbu-litm ">
				<text class='am-1'>身份证号</text>
				<input type="idcard" style="text-align: right;" maxlength="18" placeholder="请输入身份证号" v-model="personID">
			</view>
		<!-- 	<view class="amountbu-litm ">
				<text class='am-1'>是否选择票付通发送短信</text>
				<uni-data-checkbox v-model="radio1" :localdata="sex"></uni-data-checkbox>
			</view> -->
		</view>
		<!-- 提交订单按钮 :text="pricebn+ '提交订单'" -->
		<view class="fixedBtn">
			<fui-button background="#35743D" radius='50rpx' class="addButn" width="95%" @click='confirmPayment'
				height="72rpx" size='28'>￥{{form.price*num}}<text class="orderBtn">提交订单</text></fui-button>
		</view>
		<!-- 支付弹窗 -->
		<fui-bottom-popup :show="payShow" @close="closePopup">
			<view class="fui-scroll__wrap">
				<view class="fui-header">
					<text>支付成功</text>
					<view class="fui-icon__close" @tap="closePopup">
						<fui-icon name="close" :size="48"></fui-icon>
					</view>
				</view>
				<view class="fui-money">
					<view style="font-size: 40rpx;color: #000000;">
						成功支付
					</view>
					<view style="font-size: 40rpx;color: #D93C3C;">
						¥{{form.price*num}}
					</view>
				</view>
				<!-- 支付红包 -->
				<!-- <view class="payPacket marin25">
					<view class="pay-p1">
						酒店在线支付红包
					</view>
					<view class="pay-p2">
						¥{{pricebn}}
					</view>
					<view class="pay-p3" @click="getRedPacket">
						领取
					</view>
				</view> -->
				<!-- 完成 -->
				<fui-button background="#35743D" radius='50rpx' class="wancButn" width="95%" 
					height="72rpx" size='28' @click='sumbPopup'>完成</fui-button>
			</view>
		</fui-bottom-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl
	} from '@/common/settings';
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {
				id:'',
				form:'', // 详情
				phone:'',
				baseOssUrl: baseOssUrl,
				pricebn: '￥128',
				payShow: false,
				num: 1,
				userId:'',
				orderId:'',
				ordername:'',
				ordertel:'',
				contactTEL:'',
				smsSend:'',
				personID:'',
				radio1: 0,
				sex: [{
					text: '是',
					value: 0
				}, {
					text: '否',
					value: 1
				}],
			}
		},
		onLoad(e) {
			if (!this.isLogin) {
				uni.navigateTo({
					url: '../login/index'
				})
			}
			this.form= JSON.parse(e.params)
			this.id = e.id
			// this.getDetails()
			this.phone = uni.getStorageSync('userinfo').mobile
			this.userId = uni.getStorageSync('userinfo').userId
			console.log(uni.getStorageSync('userinfo').userId)
		},
		onShow() {
			this.ordername = uni.getStorageSync('shipForm').zName
			this.contactTEL = uni.getStorageSync('shipForm').phone
			this.personID = uni.getStorageSync('shipForm').sfzhm
			this.ordertel = uni.getStorageSync('shipForm').ordertel
			this.userId = uni.getStorageSync('userinfo').userId
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// 获取详情
			getDetails() {
				this.$http.get(this.$httpApi.queryById, {
					data: {
						 id: this.id
					}
				}).then(res => {
					if (res.code == 0) {
						this.form = res.catering
						this.pricebn = this.form.dj
						this.form.content = JSON.parse(this.form.content)
						console.log(this.form.content,'this.form.content')
						// this.form.content.forEach(item=>{
						// 	item = JSON.parse(item)
						// })
					}
				})
			},
			changes(e) {
				console.log(e,'这是什么什么什么')
				this.num =  e.value
				this.pricebn = e.value * this.form.dj
				
			},
			//调用此方法显示底部弹出层
			showPopup(type) {
				this.payShow = true
			},
			closePopup(type) {
				this.payShow = false
				uni.redirectTo({
					url:`/pages/ship/order/index?id=${this.orderId}`
				})
			},
			sumbPopup() { 
				uni.redirectTo({
					url:`/pages/ship/order/index?id=${this.orderId}`
				})
				// uni.navigateTo({
				// 	url:`/pages/ship/order/index?id=${this.orderId}`
				// })
			},
			payChange(e) {
				console.log("e", e)
			},
			confirmPayment() {
				//  + `?sl:${this.num}&spid:${this.form.id}&userld:${this.userld}&mld : ${this.form.mid} `
				// data: {
				// 	sl: this.num,
				// 	spid: this.form.id,
				// 	userld:this.userId,
				// 	mld:this.form.mid,
				// 	mobile:17852073282
				// }
					// this.$http.post(this.$httpApi.cySave+ "?sl="+this.num + "&spid=" + this.form.id + "&userld=" + this.userId + "&mld=" + this.form.mid).then(res => {
						var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
						if(!this.contactTEL) {
							uni.showToast({
								title: '请输入手机号！',
								icon:'none'
							});
							return
						}
						if(!reg_tel.test(this.contactTEL)) {
							uni.showToast({
								title: '请输入正确的手机号！',
								icon:'none'
							});
							return
						}
						if(!this.ordername) {
							uni.showToast({
								title: '请输入游客姓名！',
								icon:'none'
							});
							return
						}
						if(this.ordername.length < 2) {
							uni.showToast({
								title: '请输入正确的姓名！',
								icon:'none'
							});
							return
						}
						if(!this.personID) {
							uni.showToast({
								title: '请输入身份证号！',
								icon:'none'
							});
							return
						}
						if(this.personID.length < 16) {
							uni.showToast({
								title: '请输入正确的身份证号！',
								icon:'none'
							});
							return
						}
				this.$http.get(this.$httpApi.pwSave,{
					data: {
						sl: this.num,
						mpId:this.form.mpId,
						id:this.form.id,
						userId:this.userId,
						zName: this.ordername,
						phone:this.contactTEL,
						sfzhm:this.personID,
						ordertel:this.ordertel,
						// money:this.form.price,
						// money:0.1
					}
				}).then(res => {
					
					if (res.code == 0) {
						console.log("pay", res)
						this.orderId = res.orderId
						this.$http.post(this.$httpApi.ordeWxPay + "?userId=" + this.userId + "&number=" + res.number).then(res => {
							
							if (res.code == 0) {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.response.timeStamp,
									nonceStr: res.response.nonceStr,
									package: 'prepay_id=' + res.response.prepayId,
									signType: 'MD5',
									paySign: res.response.paySign,
									success: res => {
										this.payShow = true
										this.$http.post(this.$httpApi.selectPwOrderDetailed + "?id=" +this.orderId ).then(res=>{
											var forms = {
												zName: this.ordername,
												phone:this.contactTEL,
												sfzhm:this.personID,
											}
											uni.setStorageSync('shipForm',forms)
										console.log(res,'是个是是')
										})
									},
									fail: err => {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}
						})
						
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderList {
		height: 100%;

		.packBusiness {
			margin-top: 26rpx;

			.foodpackbu-litm {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 24rpx;
				font-size: 28rpx;

				.foodpackbu-top {
					display: flex;
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;

					.fd-img {
						width: 170rpx;
						height: 170rpx;
					}

					.itempack-right {
						width: 72%;
						margin-left: 24rpx;
						line-height: 50rpx;

						.title-cont {
							display: flex;
							justify-content: space-between;
							font-size: 28rpx;
							font-weight: bold;
						}



						.addres-cont {
							color: #969696;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.addres-textA {
								font-size: 24rpx;

								.addres-text {
									margin-right: 15rpx;
								}
							}


							.addres-compute {
								display: flex;
								align-items: center;

								image {
									width: 36rpx;
									height: 36rpx;
								}
							}


						}

						.subtotalA {
							display: flex;
							justify-content: flex-end;

							.subtotal-text {
								font-size: 28rpx;
								margin-right: 20rpx;
							}

							.subtotal-price {
								color: #D93C3C;
								font-size: 32rpx;
								font-weight: bold;
							}
						}

						// 时间
						.ratebu-cont {
							color: #969696;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;

							.addres-textA {
								font-size: 24rpx;

							}


						}
					}
				}
			}
		}

		.payAmount {
			background: #FFFFFF;
			padding: 24rpx 0;
			border-radius: 16rpx;

			.amountbu-litm {
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				padding: 24rpx;
				border-bottom: 1px solid #D0D0D0;

				&:last-child {
					border: none
				}

				.am-1 {
					font-size: 30rpx;

				}

				.am-2 {
					font-size: 32rpx;
					color: #D93C3C;
				}
			}
		}

		// 新增入住人信息
		.fixedBtn {
			position: fixed;
			bottom: 90rpx;
			width: 100%;

			.addButn {
				display: flex;
				justify-content: center;

			}

			.orderBtn {
				font-size: 28rpx;
				margin-left: 15rpx;
			}
		}

		// 确认支付弹窗
		.fui-scroll__wrap {
			padding-bottom: 30rpx;
			.fui-header {
				display: flex;
				justify-content: center;
				position: relative;
				margin-top: 32rpx;

				.fui-icon__close {
					position: absolute;
					right: 10rpx;
				}
			}

			.fui-money {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 50rpx 0 40rpx;
			}

			.payPacket {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 46rpx 0;
				border: 1px solid #1D1D1D;
				margin-bottom: 80rpx;

				.pay-p1 {
					font-size: 30rpx;
				}

				.pay-p2 {
					font-size: 40rpx;
					margin: 20rpx 0;
				}

				.pay-p3 {
					font-size: 26rpx;
					padding: 3rpx 20rpx;
					border: 1px solid #1D1D1D;
				}
			}

			.wancButn {
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
